<template>
    <div class="animate__animated animate__zoomIn">
        <div :style="popupStyle" class="popup-container">
            <img class="background-img" src="@/assets/three/cesiumMap/background.png" alt="">
            <div class="header">
                <div class="title">{{ dataEntity.typeAndName }}-{{ dataEntity.meterName }}</div>
                <div>
                    <el-icon class="close-btn" @click="closePopup">
                        <Close />
                    </el-icon>
                </div>
            </div>
            <div class="data">
                <div class="data-panel">
                    <div class="data-item header-list">
                        <div class="data-label">设备名称</div>
                        <div class="data-value">设备尺寸</div>
                    </div>
                    <div class="data-item" v-for="(item,index) in dataEntity.deviceList" :key="index">
                        <div class="data-label">{{ item.name }}</div>
                        <div class="data-value">{{ item.desc }}</div>
                    </div>
                </div>
            </div>
            <div class="background-bottom">
                <img src="@/assets/three/cesiumMap/bottom.png" alt="">
            </div>
            <img class="background-sjx" src="@/assets/three/cesiumMap/sjx.png" alt="">
        </div>
    </div>
</template>

<script setup>
import { Close } from '@element-plus/icons-vue'
import { ref, computed, onMounted, defineProps, watch } from 'vue';
import 'animate.css/animate.min.css';

// 弹框控制
const showPopup = ref(true);
const popupStyle = ref({});

const props = defineProps({
    dataEntity: {
        type: Object,
        default: () => ({}),
    },
});


const emit = defineEmits(['closePopup']);
const closePopup = () => {
    emit('closePopup');
    showPopup.value = false;
};

watch(() => props.dataEntity, (val) => { 
    console.log(val);
    
})


const setScale = () => {
    const scale = parseFloat(
        getComputedStyle(document.querySelector('.app-wrapper')).transform.split(',')[0]?.replace('matrix(', '') || 1
    );
    popupStyle.value = {
        transform: `scale(${scale}) translate(-50%, -110%)`, // 直接应用计算比例
        transformOrigin: 'top left', /* 从左上角缩放 */
    };
}

onMounted(() => {
    setScale();
    window.addEventListener('resize', setScale);
})

</script>

<style scoped lang="scss">
.popup-container {
    position: absolute;
    z-index: 999;
    width: 400px;
    min-height: 280px;
    >.background-img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .header {
        height: 20px;
        margin: 15px 20px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 10px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
        }

        .close-btn {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }

        .close-btn:hover {
            font-size: 30px;
            transition: all 0.1s;
        }

    }

    .data {
        display: flex;
        text-align: center;
        width: 90%;
        margin: 0px auto 60px;
        box-sizing: border-box;

        .data-panel {
            flex: 1;
            width: 100%;
            border-bottom: 1px solid rgba(27, 150, 208, 1);
            .data-item {
                display: flex;
                align-items: center;
                height: 40px;
                width: 100%;
                .data-label {
                    flex: 1;
                    font-size: 14px;
                    border: 1px solid rgba(27, 150, 208, 1);
                    border-right: none;
                    border-bottom: none;
                    color: #fff;
                    height: 40px;
                    line-height: 40px;
                }
                .data-value {
                    flex: 1;
                    font-size: 14px;
                    color: #fff;
                    padding-left: 10px;
                    // background: rgba(9, 187, 197, 0.2);
                    border: 1px solid rgba(27, 150, 208, 1);
                    border-bottom: none;
                    line-height: 40px;
                    height: 40px;
                }

            }
            .header-list{
                font-weight: bold;
                font-size: 16px;
            }
        }
    }

    >.background-bottom {
        position: absolute;
        z-index: -1;
        width: 80px;
        height: 14px;
        z-index: -1;
        bottom: 6.5%;
        left: 50%;
        transform: translateX(-58%);
    }

    .background-sjx{
        position: absolute;
        z-index: -10;
        width: 40px;
        height: 50px;
        z-index: -1;
        bottom: 0%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateY(52%);
    }
}
</style>
